<template>
	<div class="ShopCar-continer">
		<div class="ShopCar-title-img">
			<img src="../../images/logo.png" alt />
		</div>
		<div class="totalcommodity">
			<p>全部商品 {{TotalNum}}</p>
		</div>
		<div class="title"> 
			<div class="checkall">
				<Checkbox v-model="checkall" @click="CheckAll()">
					<span v-if="checkall">已全选</span>
					<span v-else>全选</span>
				</Checkbox>
			</div>
			<div class="commodityname">商品</div>
			<div class="commoditynone"></div>
			<div class="commodityprice">单价</div>
			<div class="commoditynum">数量</div>
			<div class="commoditysum">小计</div>
			<div class="commodityaction">操作</div>
		</div>
		<div class="commoditylist">
			<div class="commoditycontent" v-for="(item,index) in Goods" :key="item.id">
				<div class="commoditycontent-check">
					<Checkbox v-model="singlecheck"></Checkbox>
				</div>
				<div class="commodity-card">
					<div class="commodity-img">
						<img src="../../images/commodity1.jpg" alt />
						<!-- <img :src="'http://39.96.195.154:8080/upload/'+ item.sensor_picture" alt /> -->
					</div>
					<div class="commidty-introduce">{{item.sensor_name}}</div>
				</div>
				<div class="commodity-price">￥{{item.sensor_price | numFilter}}</div>
				<div class="commodity-num">
					<div class="input">
						<div class="input-reduce" @click="reduce(item.sensor_price)">-</div>
						<div class="input-num">{{Num}}</div>
						<div class="input-plus" @click="plus(item.sensor_price)">+</div>
					</div>
				</div>
				<div class="commodity-sum">￥{{subtotal | numFilter}}</div>
				<div class="commodity-delete">
					<Button type="error" size="small" @click="DeleteGood(index)">删除</Button>
				</div>
			</div>
		</div>
		<div class="commodity-footer">
			<div class="footer-check">
				<Checkbox v-model="checkall" @click="CheckAll()">
					<span v-if="checkall">已全选</span>
					<span v-else>全选</span>
				</Checkbox>
			</div>
			<div class="account">
				<div class="totalaccount">
					总价：
					<span>￥{{ | numFilter}}</span>
				</div>
				<div class="pay">去结算</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Axios from "axios";
	import httpRequest from "../../tools/Ajax.js"

	export default {
		data() {
			return {
				Goods: [],
				Num: JSON.parse(localStorage.getItem("TheNum") || "[]"),
				price: 1,
				subtotal: '',
				TotalNum: 2,
				checkall: false,
				singlecheck: false
			};
		}, 
		created() {
			this.Getgoos();
		},
		mounted() {},
		methods: {
			Getgoos() { 
				let self = this;

				function GetGoods(respondData) {
					var GoodsInfo = JSON.parse(respondData);
					self.Goods = GoodsInfo.data;
					console.log(self.Goods);
				}

				var paramObj = {
					httpUrl: "http://39.96.195.154:8080/checkStoreById?id=1",
					type: "get",
					data: {}
				};
				httpRequest(
					paramObj,
					function(respondData) {
						//这里编写成功的回调函数
						GetGoods(respondData);
					},
					function() {
						alert("网络错误");
					}
				);


			},
			DeleteGood(index) {
				let self = this;

				function GetGoods(respondData) {
					var GoodsInfo = JSON.parse(respondData);
					self.Goods = GoodsInfo.data;
					console.log(self.Goods);
				}

				var paramObj = {
					httpUrl: "http://39.96.195.154:8080/user/delFromCart",
					type: "post",
					data: {
						id: index
					}
				};
				httpRequest(
					paramObj,
					function(respondData) {
						//这里编写成功的回调函数
						GetGoods(respondData);
					},
					function() {
						alert("网络错误");
					}
				);
			},
			CheckAll() {},
			reduce(price) {
				
				if (this.Num > 1) {
					this.Num--;
					var TheNum = this.Num;
					this.subtotal = TheNum * price
					localStorage.setItem("TheNum", JSON.stringify(TheNum));
				} else {
					return;
				}
			},
			plus(price) {
				if (this.Num >= 0) {
					this.Num++;
					var TheNum = this.Num;
					this.subtotal = TheNum * price
					localStorage.setItem("TheNum", JSON.stringify(TheNum));
				} else {
					return;
				}
			}
		},
		// computed: {
		// 	TheSum: function() {
		// 		return this.Num * this.price;
		// 	},
		// 	TotalPrice: function() {
		// 		return this.TheSum;
		// 	}
		// },
		filters: {
			numFilter(value) {
				// 截取当前数据到小数点后1位
				let realVal = parseFloat(value).toFixed(1);
				return realVal;
			}
		}
	};
</script>

<style lang="less" scoped>
	.ShopCar-continer {
		width: 100%;
		height: 100%;
		min-height: 100px;
	}

	.ShopCar-title-img {
		width: 340px;
		height: 120px;
	}

	.ShopCar-title-img>img {
		width: 100%;
		height: 100%;
	}

	.totalcommodity {
		width: 100%;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		font-weight: 800;
		letter-spacing: 1px;
		color: #e2231a;
	}

	.title {
		width: 100%;
		height: 43px;
		background-color: #f3f3f3;
		display: flex;
	}

	.checkall {
		width: 80px;
		height: 43px;
		line-height: 43px;
		padding-left: 12px;
		border-top: 1px solid #e2231a;
	}

	.commodityname {
		width: 208px;
		height: 43px;
		line-height: 43px;
		padding-left: 48px;
	}

	.commoditynone {
		width: 360px;
		height: 43px;
	}

	.commodityprice {
		width: 120px;
		height: 43px;
		line-height: 43px;
	}

	.commoditynum {
		width: 120px;
		height: 43px;
		line-height: 43px;
	}

	.commoditysum {
		width: 120px;
		height: 43px;
		line-height: 43px;
	}

	.commodityaction {
		width: 120px;
		height: 43px;
		line-height: 43px;
	}

	.commoditylist {
		width: 100%;
		min-height: 148px;
		margin-top: 12px;
	}

	.commoditycontent {
		width: 100%;
		height: 118px;
		border-top: 2px solid #aaaaaa !important;
		border: 1px solid #f1f1f1;
		display: flex;
		margin-top: 12px;
	}

	.commoditycontent-check {
		width: 48px;
		height: 118px;
		line-height: 118px;
		padding-left: 12px;
	}

	.commodity-card {
		width: 520px;
		height: 118px;
		display: flex;
		align-items: center;
	}

	.commodity-img {
		width: 80px;
		height: 80px;
		border: 1px solid #f1f1f1;
	}

	.commodity-img>img {
		width: 100%;
		height: 100%;
	}

	.commidty-introduce {
		font-size: 18px;
		font-weight: bold;
		width: 220px;
		height: 118px;
		padding: 20px 0px 0px 12px;
		color: black;
		padding-left: 12px;
	}

	.commodity-price {
		width: 120px;
		height: 118px;
		line-height: 118px;
		text-align: center;
	}

	.commodity-num {
		width: 106px;
		height: 118px;
		line-height: 118px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.input {
		width: 84px;
		height: 24px;
		display: flex;
	}

	.input-reduce {
		width: 17px;
		height: 22px;
		border: 1px solid #f3f3f3;
		line-height: 22px;
		text-align: center;
	}

	.input-reduce:hover {
		cursor: pointer;
	}

	.input-num {
		width: 46px;
		height: 22px;
		border-top: 1px solid #f3f3f3;
		border-bottom: 1px solid #f3f3f3;
		line-height: 22px;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
	}

	.input-plus {
		width: 17px;
		height: 22px;
		border: 1px solid #f3f3f3;
		line-height: 22px;
		text-align: center;
	}

	.input-plus:hover {
		cursor: pointer;
	}

	.commodity-sum {
		width: 120px;
		height: 118px;
		line-height: 118px;
		text-align: center;
	}

	.commodity-delete {
		width: 120px;
		height: 118px;
		text-align: center;
		line-height: 118px;
	}

	.commodity-footer {
		width: 100%;
		height: 52px;
		margin-top: 12px;
		border: 1px solid #f1f1f1;
		display: flex;
		justify-content: space-between;
	}

	.footer-check {
		width: 80px;
		height: 52px;
		line-height: 52px;
		padding-left: 12px;
	}

	.account {
		width: 240px;
		height: 52px;
		display: flex;
	}

	.totalaccount {
		width: 180px;
		height: 52px;
		line-height: 52px;
		padding-left: 4px;
	}

	.totalaccount>span {
		font-size: 18px;
		font-weight: 800;
		color: #e2231a;
	}

	.pay {
		width: 100px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 18px;
		font-family: "Microsoft YaHei";
		font-weight: bolder;
		color: white;
		background-color: #e64347;
	}

	.pay:hover {
		cursor: pointer;
	}
</style>
